<template>
  <div id="agent">
    <div v-loading="loading" element-loading-text="加载中..." class="agent-box">
      <!-- 聊天内容 -->
      <div class="agent-txt" v-if="messages && messages.length > 0">
        <div class="scroll-container" ref="scrollContainer">
          <div v-for="(msg, index) in messages" :key="index">
            <!-- 用户消息 -->
            <div class="my-box" v-if="msg.role == 'user'">
              <div class="my-txt" v-html="msg.content"></div>
              <div class="my-face">
                <img src="@/assets/img/face2.png" />
              </div>
            </div>
            <!-- AI 消息 -->
            <div class="ai-box" v-if="msg.role == 'assistant'">
              <div class="ai-face">
                <img src="@/assets/img/face1.png" />
              </div>
              <div class="ai-txt" v-html="msg.content"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>
        <div class="no-data-txt">暂无聊天记录</div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  props: {
    agentId: {
      type: Number,
      required: true,
    },
    userId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      courseId: null,
      classId: null,
      loading: false,
      isProcessing: false,
      userInfo: null, // 用户信息
      textarea: "", // 输入框内容
      messages: [], // 存储聊天记录
      eventSource: null, // SSE 实例
      connectId: null, // SSE 返回的客户端通信 ID
      sessionId: null, // 当前会话 ID
      currentAiMessageIndex: null, // 当前 AI 消息的索引
      isFirst: true, // 是否是首次接收到消息
      loadingMessageIndex: null, // 加载提示消息的索引
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.classId = JSON.parse(localStorage.getItem("classId"));
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getMessages();
  },
  mounted() {},
  methods: {
    getMessages() {
      const url = `/tes/course/auto/make/list-record`;
      const params = {
        contextId: this.agentId,
        courseId: this.courseId,
        type: 3,
        classId: this.classId,
        correctAnswer: 1,
        userId: this.userId,
      };
      this.loading = true;
      this.$axios
        .get(url, { params })
        .then((response) => {
          this.messages = response.data.record;
          this.messages.map((item) => {
            item.content = item.content.replace(/\n/g, "<br/>");
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#agent {
  height: calc(100vh - 150px);
  .agent-box {
    position: relative;
    height: 100%;
    // background: linear-gradient(90deg, #ffffff, #d5e5fe);
    // box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);

    background: linear-gradient(90deg, #f0f2f8, #d1e1f8);
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);

    border-radius: 10px;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    .agent-txt {
      height: calc(100% - 80px);
      > div {
        height: 100%;
        margin: 36px 0px;
        padding: 0px 26px;
        box-sizing: border-box;
        > div {
          margin-bottom: 20px;
        }
      }
      .ai-box {
        display: flex;
        justify-content: flex-start;
        gap: 14px;
        margin-bottom: 20px;
        .ai-face {
          min-width: 40px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #ffffff;
        }
        .ai-txt {
          // max-width: calc(100% - 108px);
          max-width: 80%;
          background: #ffffff;
          border-radius: 6px;
          font-size: 16px;
          color: #4b5b76;
          padding: 10px 15px;
          box-sizing: border-box;
          box-shadow: 0px 5px 10px 0px rgba(70, 123, 235, 0.11);
          border: 1px solid #e2e2e2;
        }
      }
      .my-box {
        display: flex;
        justify-content: flex-end;
        gap: 14px;
        margin-bottom: 20px;
        .my-face {
          min-width: 40px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1e4aee;
        }
        .my-txt {
          // max-width: calc(100% - 108px);
          max-width: 80%;
          background: #1e4aee;
          border-radius: 6px;
          font-size: 16px;
          color: #ffffff;
          padding: 10px 15px;
          box-sizing: border-box;
        }
      }
    }
    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 150px 0;
    }
    .agent-input {
      position: relative;
      width: calc(100% - 52px);
      position: absolute;
      left: 26px;
      bottom: 36px;
      box-sizing: border-box;
      :deep(.el-textarea) {
        position: relative;
        background: #fff;
        padding-bottom: 48px;
        box-shadow: 0px 5px 10px 0px rgba(70, 123, 235, 0.11);
        border: 1px solid #e2e2e2;
        border-radius: 8px;
        padding: 18px 0px 40px;
        box-sizing: border-box;
      }
      :deep(.el-textarea__inner) {
        height: 90px;
        border: 0;
        box-shadow: none;
        background: #ffffff;
        box-sizing: border-box;
        padding: 0px 26px;
        overflow-y: auto; // 启用纵向滚动

        // 针对 Webkit 浏览器（如 Chrome、Safari）
        &::-webkit-scrollbar {
          width: 4px; // 设置滚动条宽度
        }

        &::-webkit-scrollbar-track {
          background: transparent; // 将轨道背景设为透明可以间接隐藏上下箭头
          border-radius: calc(4px / 2); // 使用 calc() 替代 /
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1; // 设置滑块颜色
          border-radius: calc(4px / 2); // 使用 calc() 替代 /

          &:hover {
            background: #a8a8a8; // 手动计算 darken(#c1c1c1, 10%) 的结果
          }
        }
      }
      .input-clear {
        position: absolute;
        left: 16px;
        bottom: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #7c8aa7;
        cursor: pointer;
        &:hover {
          color: #2a6ee9;
        }
      }
      .input-btn {
        position: absolute;
        right: 15px;
        bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 34px;
        background: #2a6ee9;
        border-radius: 10px;
        font-size: 14px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          background: #1e4aee;
        }
        &.btn-disabled {
          background: #d5e5fe;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>